<template>
  <div class='container' v-if="isShow">
    <el-button type="info" icon="el-icon-close" circle @click="hide"></el-button>
    <video :src="img" autoplay  pool class="videe"></video>
  </div>
</template>

<script>
export default {
  props: {
    img: String
  },
  data () {
    return {
      isShow: false
    }
  },
  methods: {
    hide () {
      this.isShow = false
    },
    show () {
      this.isShow = true
    }
  }
}
</script>

<style scoped >
  .container{

    position: fixed;
    z-index: 9999;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    /* display: flex;
    align-items: center;
    justify-content: center; */
  }
  .videe{
    /* position: absolute; */
    width: 50%;
    /* top: 20%;
    left: 26%; */

  }
  .el-button{
    /* position: absolute; */
    display: block;
    margin: 30px auto;
    font-size: 30px;
    /* top: 5%;
    left: 48%; */
  }
</style>
